<template>
  <a-modal title="产品详情" :visible="showDetailDialog" @cancel="closedDialog" :footer="false" :align-center="false" title-align="start" top="8vh" width="1000px" :mask-closable="false" :render-to-body="renderBody">
    <div class="detail-wrap">
      <template v-if="showDetail">
        <div class="clearfix">
          <div class="fl" style="width: 200px; height: 200px">
            <a-image class="spu-img" :src="getSrc(spuInfo)" :width="200" :height="200" fit="contain" />
          </div>
          <div class="fl" style="width: calc(100% - 200px)">
            <a-row>
              <a-col :span="3" style="color: #a2a2a2; text-align: right; width: 120px">SPU名称：</a-col>
              <a-col :span="19" :offset="1">{{ spuInfo.spuName ? spuInfo.spuName : '--' }}</a-col>
            </a-row>
            <a-row style="margin: 15px 0">
              <a-col :span="12">
                <a-row>
                  <a-col :span="6" style="color: #a2a2a2; text-align: right">SPU：</a-col>
                  <a-col :span="15" :offset="2">
                    <div class="flex-c">
                      <p>{{ spuInfo.spu || '--' }}</p>
                      <CopyText :val="spuInfo.spu" />
                    </div>
                  </a-col>
                </a-row>
              </a-col>
              <a-col :span="12">
                <a-row>
                  <a-col :span="6" style="color: #a2a2a2; text-align: right">产品类目：</a-col>
                  <a-col :span="15" :offset="2">{{ $extract(spuInfo, 'category.name') }}</a-col>
                </a-row>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-row>
                  <a-col :span="6" style="color: #a2a2a2; text-align: right">产品开发员：</a-col>
                  <a-col :span="15" :offset="2">{{ $extract(spuInfo, 'developer.name') }}</a-col>
                </a-row>
              </a-col>
              <a-col :span="12">
                <a-row>
                  <a-col :span="6" style="color: #a2a2a2; text-align: right">销售员：</a-col>
                  <a-col :span="15" :offset="2">
                    <p>{{ showSalerList(spuInfo.salerList) }}</p>
                  </a-col>
                </a-row>
              </a-col>
            </a-row>
            <a-row style="margin-top: 15px">
              <a-col :span="12">
                <a-row>
                  <a-col :span="6" style="color: #a2a2a2; text-align: right">品牌：</a-col>
                  <a-col :span="15" :offset="2">{{ $extract(spuInfo, 'brand.name') }}</a-col>
                </a-row>
              </a-col>
            </a-row>
            <a-row style="margin-top: 15px">
              <a-col :span="3" style="color: #a2a2a2; text-align: right">标签：</a-col>
              <a-col :span="20" :offset="1">
                <template v-if="spuInfo.tagList && spuInfo.tagList.length">
                  <span v-for="(tag, i) of spuInfo.tagList" :key="i" class="tag-btn" :style="{ backgroundColor: tag.color }">{{ tag.name }}</span>
                </template>
                <span v-else>--</span>
              </a-col>
            </a-row>
          </div>
        </div>
        <a-tabs v-model:active-key="currentPage">
          <a-tab-pane title="产品规格" key="1">
            <a-table :row-class="setRowClass" size="mini" class="table-singe-line show-border-table" :data="productSkuList" :pagination="false" :bordered="{ cell: true }" :scroll="{ y: '100%' }">
              <template #columns>
                <a-table-column title="主图" :width="60">
                  <template #cell="{ record, rowIndex }">
                    <a-popover position="rt" trigger="click">
                      <template #content>
                        <ProductPics :key="rowIndex" :productInfo="record" />
                      </template>
                      <a-image width="40" height="40" :preview="false" fit="contain" :src="getSrc(record)" />
                    </a-popover>
                  </template>
                </a-table-column>
                <a-table-column title="SKU" data-index="sku" :width="140" />
                <a-table-column title="产品名称">
                  <template #cell="{ record }">
                    <TextLimit position="top" :rows="1" :val="record.skuName" />
                  </template>
                </a-table-column>
                <a-table-column title="规格">
                  <a-table-column v-for="(item, i) of specList" :key="i" :title="item.nameCn">
                    <template #cell="{ record }">
                      {{ getValueCn(item, record) }}
                    </template>
                  </a-table-column>
                </a-table-column>
                <a-table-column title="重量（g）" :width="100">
                  <template #cell="{ record }">
                    {{ $extract(record, 'weight.weight') }}
                  </template>
                </a-table-column>
                <a-table-column title="体积（cm）" :width="100">
                  <template #cell="{ record }">
                    <a-space v-if="record.volume" wrap>
                      <div>{{ $extract(record, 'volume.length') ? $extract(record, 'volume.length') : '-' }}×</div>
                      <div>{{ $extract(record, 'volume.width') ? $extract(record, 'volume.width') : '-' }}×</div>
                      <div>{{ $extract(record, 'volume.height') ? $extract(record, 'volume.height') : '-' }}</div>
                      <div>{{ $extract(record, 'volume.unit') }}</div>
                    </a-space>
                    <div v-else>--</div>
                  </template>
                </a-table-column>
                <a-table-column title="销售员" :width="80">
                  <template #cell="{ record }">
                    <p>{{ showSalerList(record.salerList) }}</p>
                  </template>
                </a-table-column>
              </template>
            </a-table>
          </a-tab-pane>
          <a-tab-pane title="产品图" key="2">
            <ProductPics key="spu" :productInfo="spuInfo" />
          </a-tab-pane>
          <a-tab-pane title="报关/装箱/包装" key="3">
            <ProductOverheadInfo :productInfo="spuInfo" />
          </a-tab-pane>
          <a-tab-pane title="产品资料" key="4">
            <ProductSkuDataInfo :productInfo="spuInfo" />
          </a-tab-pane>
          <a-tab-pane title="产品属性" key="5">
            <div class="propList-wrap" v-if="propertyListData.length">
              <a-descriptions :data="propertyListData" bordered />
            </div>
            <a-empty v-else />
          </a-tab-pane>
        </a-tabs>
      </template>
      <a-empty v-else :description="`未查询到SKU：${sku}，请检查该SKU是否存在产品库中！`" />
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import ProductPics from './productPics.vue'
  import ProductOverheadInfo from './productOverheadInfo.vue'
  import ProductSkuDataInfo from './productSkuDataInfo.vue'
  import { searchSpuDetailBySku } from '@/api/product'
  onMounted(getSpuDetail)
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    sku: {
      type: String,
    },
    renderBody: {
      type: Boolean,
      default: true,
    },
  })
  const emit = defineEmits(['closed'])
  const showDetailDialog = ref(props.isShow)
  const currentPage = ref('1')
  const propertyListData = ref<Array<any>>([])
  const productSkuList = ref<Array<any>>([])
  const specList = ref<Array<any>>([])
  const spuInfo = ref<any>({})
  const showDetail = ref(true)

  // 查询spu详情
  async function getSpuDetail() {
    const res: any = await searchSpuDetailBySku(props.sku)
    showDetail.value = res?.data?.id ? true : false
    spuInfo.value = res?.data || {}
    specList.value = spuInfo.value.specList || []
    setSkuList()
    delPropertyListData()
  }
  // sku列表 需要把当前sku放在第一位
  function setSkuList() {
    let list = spuInfo.value.productSkuList || []
    let _index = list.findIndex((el: any) => el.sku == props.sku)
    if (_index > -1) {
      let currentSku = JSON.parse(JSON.stringify(list[_index]))
      currentSku.current = true
      list.splice(_index, 1)
      list.unshift(currentSku)
    }
    productSkuList.value = list
  }
  // spu主图
  function getSrc(item: any) {
    let str = item?.productPicList && item?.productPicList[0] ? item?.productPicList[0].url : ''
    return str
  }
  // 显示销售员
  function showSalerList(list: any) {
    if (!list?.length) return '--'
    let names = list.map((el: any) => el.name)
    return names.join(',')
  }
  //显示规格
  function getValueCn(title: any, item: any) {
    let arr = item?.specValueList || []
    let info: any = arr.find((e: any) => e.nameCn == title.nameCn)
    return info ? info.valueCn : ''
  }
  // 显示属性
  function delPropertyListData() {
    let list = spuInfo.value.propList || []
    propertyListData.value = []
    list.forEach((e: any) => {
      let obj = {
        label: e.name,
        value: '',
      }
      let text = ''
      switch (e.type) {
        case 1:
        case 4:
          text = e.valueStr
          break
        case 2:
        case 7:
        case 8:
          text = e.valueStrList.join(',')
          break
        case 3:
          text = e.valueBoolean ? '是' : '否'
          break
        case 5:
          text = e.valueNumber
          break
        case 6:
          text = e.valueBigDecimal
          break
        default:
          text = '类型未定义'
          break
      }
      obj.value = text
      propertyListData.value.push(obj)
    })
  }
  // 关闭
  function closedDialog() {
    showDetailDialog.value = false
    emit('closed')
  }
  function setRowClass(option) {
    let current = option.raw?.current
    return current ? 'current-row' : ''
  }
</script>

<style lang="less" scoped>
  .spu-img {
    border: 1px solid #eee;
  }
  .tag-btn {
    height: 20px;
    line-height: 20px;
    padding: 0 5px;
    color: white;
    margin-right: 5px;
  }
  :deep(.show-border-table .arco-table-container) {
    border-right: 1px solid var(--color-neutral-3);
    .arco-table-tr .arco-table-td {
      &:last-child {
        border-right: none;
      }
    }
    .current-row .arco-table-td {
      background-color: rgb(var(--primary-2)) !important;
    }
  }
  .detail-wrap {
    height: calc(84vh - 90px);
    display: flex;
    flex-direction: column;
    .arco-tabs {
      flex: 1;
      overflow: hidden;
    }
    :deep(.arco-tabs) {
      .arco-tabs-nav {
        margin-bottom: 10px;
      }
      .arco-tabs-content {
        height: calc(100% - 50px);
        .arco-tabs-content-list,
        .arco-tabs-content-item,
        .arco-tabs-pane {
          height: 100%;
        }
      }
    }
  }
  .propList-wrap {
    height: 100%;
    overflow: auto;
  }
</style>
